<template>
    <view class="container">
        <u-input
            placeholder="请输入用户昵称"
            border="none"
            v-model="nickname"
            fontSize="34rpx"
            color="#000000"
            :customStyle="{
                padding: '25rpx 32rpx',
                background: '#F8F8F8'
            }"
        ></u-input>
        <view class="bottom">
            <u-button
                text="保存"
                :customStyle="{
                    height: '90rpx',
                    background: '#000000',
                    fontSize: '30rpx',
                    color: '#FFFFFF'
               }"
               @click="saveInfo"
            ></u-button>
        </view>
    </view>
</template>

<script>
    import { setUserNickname } from "@/config/api"
    export default {
        name: "nickname",
        data() {
            return {
                nickname: null
            }
        },
        methods: {
            async saveInfo() {
                const res = await setUserNickname({nickname: this.nickname})
                this.$store.dispatch("user/setNickName", res.nickName)
                this.$u.route({
                    type: 'navigateBack'
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        padding: 20rpx 20rpx 0 20rpx;
        .bottom {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 20rpx 20rpx calc(var(--window-bottom) + 33rpx) 20rpx;
        }
    }
</style>
